<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'费用支出',liner:false}"></header-top>
		<view class="mainpadding_top flexbetween ffffff">
			<view class="strongtext" style="min-width: 200rpx;">审批人</view>
			<view class="flexright" @click="selectRole('/pages/workbench/jiben/yuangongda?type=2')">
				<input type="text" style="text-align: right;" placeholder="选择审批人" disabled="" v-model="dataAll.send_staff_name">
				<view class="margin_left2 righticon2"></view>
			</view>
		</view>
		<view class="mainpadding_top flexbetween ffffff">
			<view class="strongtext" style="min-width: 200rpx;">费用类型</view>
			<view class="flexright" @click="FyzclxShow=true">
				<input type="text" style="text-align: right;" placeholder="选择费用类型" disabled="" v-model="dataAll.staff_fyht_type_name">
				<view class="margin_left2 righticon2"></view>
			</view>
		</view>
		<view class="mainpadding_top flexbetween ffffff">
			<view class="strongtext" style="min-width: 200rpx;">金额</view>
			<input type="number" style="text-align: right;" placeholder="输入金额" v-model="dataAll.price">
		</view>
		<view class="mainpadding_top flexbetween ffffff">
			<view class="strongtext" style="min-width: 200rpx;">费用时间</view>
			<view class="flexright" @click="shows=true">
				<input type="text" style="text-align: right;" disabled="" placeholder="选择费用时间" v-model="dataAll.fy_time">
				<view class="margin_left2 righticon2"></view>
			</view>
		</view>
		<view class="mainpadding_top flexbetween ffffff">
			<view class="strongtext" style="min-width: 200rpx;">票据单号</view>
			<input type="text" style="text-align: right;" placeholder="输入单号"  v-model="dataAll.pjdh">
		</view>
		<view class="ffffff mainpadding_top">
			<view class="titletext">提现凭证</view>
			<view class="flexleft margin_top">
				<!-- 已上传的图片 -->
				<view class="select-box flexcolumn" v-for="(item,index) in dataAll.images_text" :key="index">
					<view class="upimageicon">
						<image :src="item" mode=""></image>
						<image class="shanchu" src="@/static/image/system/shanchu3.png" @click="deleimgae(index)"
							mode=""></image>
					</view>
				</view>
				<!-- 未上传 -->
				<view class="select-box flexcenter" v-show="dataAll.images_text.length<4" @click="uploadImg">
					<view class="upimageicon">
						<image src="@/static/image/system/upimageicon.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="ffffff mainpadding_top">
			<view class="titletext">费用支出备注</view>
			<textarea class="textarea mainpadding radius margin_top" placeholder="请输入费用支出备注" v-model="dataAll.notes"></textarea>
		</view>
		<view class="flexcenter">
			<view class="yesbtn" style="position: inherit;" @click="submit">确定</view>
		</view>
		<selectFyzclx :message="{FyzclxShow:FyzclxShow}" @FyzclxSure="FyzclxSure"></selectFyzclx><!-- 费用支出类型 -->
		<u-datetime-picker :show="shows" v-model="value1" title="费用时间" mode="date" @confirm="confirm" @cancel="shows=false"
			 @close="shows=false"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				shows: false,
				value1: Number(new Date()),
				FyzclxShow:false,
				dataAll:{
					apply_staff_id:"",//审批人id
					send_staff_name:"",//审批人
					staff_fyht_type_id:"",
					staff_fyht_type_name:"",
					price:"",
					fy_time:"",
					pjdh:"",
					images:[],
					images_text:[],
					notes:"",
					custom_visit_id:"",
				},
				wfxzflag:true
			}
		},
		onLoad(options) {
			if(options.data){//拜访数据进入
				let data = JSON.parse(decodeURIComponent(options.data));
				this.dataAll.custom_visit_id = data.custom_visit_id
				this.bfFlag = true
				this.refreshmsg()
			}
		},
		onShow() {
			uni.$off('ygSelectFn');
			uni.$on('ygSelectFn', (data) => {
				this.wfxzflag = false
				this.dataAll.apply_staff_id = data.id
				this.dataAll.send_staff_name = data.name
				return false
			})
			if (this.wfxzflag && uni.getStorageSync("feiyonghetongInfo")) {
				this.dataAll = JSON.parse(uni.getStorageSync("feiyonghetongInfo"))
			}else{
				this.wfxzflag = true
			}
		},
		watch: {
			dataAll: {
				deep: true,
				handler(newval) {
					this.refreshmsg()
				}
			}
		},
		// 打印机结束
		methods: {
			// 费用支出类型
			FyzclxSure(e){
				this.FyzclxShow = false
				if(e){
					this.dataAll.staff_fyht_type_id = e.value[0].id
					this.dataAll.staff_fyht_type_name = e.value[0].name
				}
				
			},
			selectRole(url,val) {
				uni.navigateTo({
					url
				})
			},
			submit(){
				if (this.dataAll.apply_staff_id == '') {
					httpRequest.toast('请选择审批人!')
					return false
				}
				if (this.dataAll.staff_fyht_type_id=="") {
					httpRequest.toast('请选择费用类型!')
					return false
				}
				if (this.dataAll.price=="") {
					httpRequest.toast('请输入金额!')
					return false
				}
				if (this.dataAll.fy_time=="") {
					httpRequest.toast('请选择费用时间!')
					return false
				}
				if (this.dataAll.images.length==0) {
					httpRequest.toast('请上传费用凭证!')
					return false
				}
				let feiyonghetongInfo = {
					apply_staff_id:this.dataAll.apply_staff_id,//审批人id
					staff_fyht_type_id:this.dataAll.staff_fyht_type_id,
					price:this.dataAll.price,
					fy_time:this.dataAll.fy_time,
					pjdh:this.dataAll.pjdh,
					images:this.dataAll.images.join(),
					notes:this.dataAll.notes,
					custom_visit_id: this.bfFlag?this.dataAll.custom_visit_id:"",
				}
				httpRequest.request('/dhtapi/user/addFyht', 'POST', feiyonghetongInfo, false, false, true).then(res => {
					httpRequest.toast(res.msg);
					if (res.code == 1) {
						uni.setStorageSync('feiyonghetongInfo', "")
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 数据刷新
			refreshmsg() {
				let _this = this
				uni.setStorageSync('feiyonghetongInfo', JSON.stringify(this.dataAll))
			},
			confirm(e) {
				this.shows = false;
				this.dataAll.fy_time = httpRequest.returnDate(e.value);
			},
			// 删除上传图片
			deleimgae(index) {
				this.dataAll.images.splice(index, 1)
				this.dataAll.images_text.splice(index, 1)
			},
			//上传图片
			uploadImg() {
				let _this = this;
				let upImgs = _this.dataAll.images_text;
				let num = 4 - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], _this.dataAll.images_text)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									console.log(res[i])
									_this.uploadImageService(res[i], _this.dataAll.images_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			// 详情转载
			uploadImageService(url, upImg) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					this.dataAll.images.push(res.url)
					this.dataAll.images_text.push(res.fullurl)
				}).catch(err => {});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.allbtn {
		width: 218rpx;
		height: 52rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.lansebtn {
		color: #0BBDCB;
		background: rgba(11, 189, 203, .1);
	}

	.huisebtn {
		color: #999999;
		background: rgba(153, 153, 153, .1);
	}

	.selectbox {
		padding: 12rpx 50rpx;
		border-radius: 30rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background-color: #f5f5f5;
	}

	.needpadding {
		padding: 20rpx 0;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.05);
	}

	.smalltext {
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.price {
		color: #00B855;
	}

	.priceinput {
		text-align: right;
	}

	.pricetext {
		font-size: 28rpx;
		color: #0BBDCB;
		font-weight: bold;
	}
	.maincolor_text{
		font-size: 24rpx;
		color: #0BBDCB;
	}

	.over {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #00B855;
		border-radius: 50rpx;
		padding: 15rpx 70rpx;
	}

	// 底部tab
	.tab_bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 30rpx 50rpx 30rpx;
	}

	.tab1 {
		border: 2rpx solid #0BBDCB;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		padding: 12rpx 50rpx;
	}

	.tab2 {
		border: 2rpx solid #0BBDCB;
		border-left: none;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		padding: 12rpx 50rpx;
	}

	// 选中的底部
	.selecbottab {
		background-color: #0BBDCB;
		color: #FFFFFF;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	// 未选中的底部
	.noselecbottab {
		background-color: #fff;
		color: #0BBDCB;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}
	.zhengds {
		padding: 40rpx;
	}
	
	.shangpin {
		padding-bottom: 30rpx;
		border-bottom: 1px solid rgba(153, 153, 153, 0.05);
	}
	
	.btns {
		width: 198rpx;
		height: 62rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}
	
	.btn2 {
		color: #FFFFFF;
		background: #0BBDCB;
		border-radius: 74rpx;
		margin-left: 30rpx;
	}
	
	.btn1 {
		border: 1rpx solid #0BBDCB;
		color: #0BBDCB;
		background: #FFFFFF;
		border-radius: 74rpx;
	}
	// 定位点点点(蓝色提示)
	.diandiandian {
		position: relative;
	}
	.selectcontent {
		position: absolute;
		top: 50rpx;
		right: -6rpx;
		min-width: 250rpx;
		mix-width: 250rpx;
		text-align: center;
		background-color: rgba(11, 189, 203, 0.8);
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		word-wrap: break-word;
	}
	
	.sanjiao {
		position: absolute;
		top: -12rpx;
		right: 8rpx;
		background-image: url("@/static/image/system/sanjiao2.png");
		width: 40rpx;
		height: 12rpx;
		background-size: 100% 100%;
	}
	
	.leftimage {
		width: 34rpx;
		height: 34rpx;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.itemselect {
		padding: 20rpx 30rpx;
	}
	
	//结束
	// 图片选择开始
	.select-box {
		width: 25%;
	}
	.upimageicon {
		position: relative;
		width: 140rpx;
		height: 140rpx;
		border-radius: 20rpx;
		image {
			border-radius: 20rpx;
			width: 100%;
			height: 100%;
		}
	}
	
	.shanchu {
		width: 31rpx !important;
		height: 30rpx !important;
		position: absolute;
		left: 45%;
		bottom: -7%;
	}
	
	.textarea {
		box-sizing: border-box;
		width: 100%;
		background-color: #F8F8F8;
		height: 180rpx;
	}
	
	// 图片选择结束
</style>
